<template>
	<div>
		<view class="header" v-if="applyType == 0">
			<block v-for="(item, index) in tab_list" :key="index">
				<view class="tab-item" :class="{active: tab_index === index}" @click.stop="onTab(index)">

					{{item.title}}

					<view class="line" v-if='tab_index === index'></view>
				</view>
			</block>
		</view>

		<view class="wrap paddingBottom">
			<view class="wrap-content">
				<block v-if="tab_index === 1">
					<view class="item">
						<view class="left">团队名称</view>

						<input class="value" v-model="team_name" placeholder="请输入" placeholder-class="place" />
					</view>

					<view class="item">
						<view class="left">所属院校</view>

						<input class="value" v-model="school" placeholder="请输入" placeholder-class="place" />
					</view>
					
					<view class="item">
						<view class="left">企业名称</view>
					
						<input class="value" v-model="enterpriseTitle" placeholder="请输入" placeholder-class="place" />
					</view>
					
					<view class="item">
						<view class="left">职位</view>
					
						<input class="value" v-model="position" placeholder="请输入" placeholder-class="place" />
					</view>
				</block>
				<view class="item">
					<view class="left">姓名</view>

					<input class="value" v-model="name" placeholder="请输入" placeholder-class="place" />
				</view>

				<view class="item">
					<view class="left">性别</view>

					<picker mode="selector" :range="sex_list" @change="onSex">
						<view class="value">
							<!-- <input class="value value2" placeholder="请选择" v-model="sex" disabled /> -->
							<view class="value value2">
								<text class="place" v-if="sex === ''">请选择</text>
								<text>{{sex}}</text>
							</view>

							<image class="arrow" src='/static/images/arrow.png' />
						</view>
					</picker>
				</view>

				<view class="item">
					<view class="left">身份证号码</view>

					<input class="value" maxlength="18" type="idcard" v-model="idCard" placeholder="请输入"
						placeholder-class="place" />
				</view>

				<view class="item">
					<view class="left">手机号</view>

					<input class="value" v-model="mobile" type="tel" maxlength="11" placeholder="请输入"
						placeholder-class="place" />
				</view>

				<view class="item">
					<view class="left">邮箱</view>

					<input class="value" v-model="email" placeholder="请输入" placeholder-class="place" />
				</view>

				<view class="item">
					<view class="left">地址</view>

					<input class="value" v-model="address" placeholder="请输入" placeholder-class="place" />
				</view>

				<view class="item">
					<view class="left">衣服尺码</view>

					<input class="value" v-model="size" placeholder="请输入" placeholder-class="place" />
				</view>

				<view class="item">
					<view class="left">血型</view>

					<input class="value" v-model="blood" placeholder="请输入" placeholder-class="place" />
				</view>

				<view class="item">
					<view class="left">紧急联系人姓名</view>

					<input class="value" v-model="urgent_name" placeholder="请输入" placeholder-class="place" />
				</view>

				<view class="item">
					<view class="left">紧急联系人电话</view>

					<input class="value" v-model="urgent_mobile" maxlength="11" type="tel" placeholder="请输入"
						placeholder-class="place" />
				</view>

				<view class="physical-bg">
					<view class="title">体检报告</view>

					<view class="img-bg"  @click="onChooseImage(0)">
						<image v-if="physical_img === ''" class="add" src="/static/images/upload_add.png" />
						<image v-else class="img" :src="getImageURL(physical_img)" />
					</view>
				</view>

				<view class="other-bg" v-if="tab_index === 1">
					<view class="title-bg">
						<text class="aa">创业项目资料</text>
						<text class="bb">（非必填）</text>
					</view>

					<view class="sub-title">
						报名创业大赛的选手请提交创业项目资料
					</view>

					<view class="img-bg" @click="onChooseImage(1)">
						<image v-if="other_img === ''" class="add" src="/static/images/upload_add.png" />
						<image v-else class="img" :src="getImageURL(other_img)" />
					</view>
				</view>
			</view>
		</view>

		<view class="footer safe-area">
			<view class="btn" @click="onSubmit">
				提交报名
			</view>
		</view>
	</div>
</template>

<script>
	import {uploadData, createApply, getMineInfoData} from "@/utils/api.js";
	export default {
		data() {
			return {
				competitionID:"", //赛事ID
				hasTtApply: 0,
				hasGrApply: 0,
				tab_list: [{
						title: "体验组报名"
					},
					{
						title: "专业组报名"
					},
				], //tab
				tab_index: 0, //报名状态
				applyType: 0, 
				
				sex_list: [
					"男", "女"
				],

				name: "", //姓名
				sex: "", //性别
				idCard: "", //身份证号
				mobile: "", //手机号
				email: "", //邮箱
				address: "", //地址
				size: "", //衣服尺码
				blood: "", //血型
				urgent_name: "", //紧急联系人姓名
				urgent_mobile: "", //紧急联系人电话
				physical_img: "", //体检报告单
				team_name: "", //团队名称
				school: "", //所属院校
				other_img: "", //创业项目资料图片
				enterpriseTitle: "", //企业名称
				position: "", //职位
			}
		},
		onLoad(options) {
			this.competitionID = options.id;
			this.applyType = options.applyType;
			this.hasGrApply = options.hasGrApply;
			this.hasTtApply = options.hasTtApply;
			if (options.applyType != 0) {
				this.tab_index = options.applyType - 1;
			}
			if (options.applyType == 0) {
				if (this.hasGrApply == 1) {
					this.tab_index = 1;
				}
			}
			this.getUserInfo()
		},
		methods: {
			/**
			 * 切换
			 */
			onTab(index) {
				if (this.hasGrApply == 0 && index == 0) {
					this.tab_index = index;
				}
				if (this.hasTtApply == 0 && index == 1) {
					this.tab_index = index;
				}
			},
			/**
			 * 性别
			 */
			onSex(e) {
				const index = e.detail.value
				this.sex = this.sex_list[index]
			},
			/**
			 * 选择图片
			 */
			onChooseImage(index) {
				uni.chooseImage({
					count: 1,
					success:res => {
						this.uploadImageData(res.tempFilePaths[0], index)
					}
				})
			},
			//上传图片
			uploadImageData(file, index) {
				uploadData(file).then(res => {
					if (index === 0) {
						this.physical_img = res.data.url;
					} else {
						this.other_img = res.data.url;
					}
				})
			},

			/**
			 * 提交
			 */
			onSubmit() {
				if (this.team_name === "" && this.tab_index === 1) {
					this.$st.show("请输入团队名称")
					return;
				}
				if (this.school === "" && this.tab_index === 1) {
					this.$st.show("请输入所属院校")
					return;
				}
				if (this.enterpriseTitle === "" && this.tab_index === 1) {
					this.$st.show("请输入企业名称")
					return;
				}
				if (this.position === "" && this.tab_index === 1) {
					this.$st.show("请输入职位")
					return;
				}
				if (this.name === "") {
					this.$st.show("请输入姓名")
					return;
				}
				if (this.sex === '') {
					this.$st.show("请选择性别")
					return;
				}
				if (this.idCard === "") {
					this.$st.show("请输入身份证号码")
					return;
				}
				if (this.mobile === "") {
					this.$st.show("请输入手机号")
					return;
				}
				if (this.email === "") {
					this.$st.show("请输入邮箱")
					return;
				}
				if (this.address === "") {
					this.$st.show("请输入地址")
					return;
				}
				if (this.size === "") {
					this.$st.show("请输入衣服尺码")
					return;
				}
				if (this.blood === "") {
					this.$st.show("请输入血型")
					return;
				}
				if (this.urgent_name === "") {
					this.$st.show("请输入紧急联系人姓名")
					return;
				}
				if (this.urgent_mobile === "") {
					this.$st.show("请输入紧急联系人电话")
					return;
				}
				if (this.physical_img === "") {
					this.$st.show("请上传体检报告")
					return;
				}
				let obj = {
					competitionId: this.competitionID,
					applyType: this.tab_index,
					name: this.name,
					sex: this.sex,
					idCard: this.idCard,
					phone: this.mobile,
					email: this.email,
					address: this.address,
					size: this.size,
					blood: this.blood,
					urgent_name: this.urgent_name,
					urgent_phone: this.urgent_mobile,
					examinationReport: this.physical_img
				}
				if (this.tab_index === 1) {
					obj['academy'] = this.school;
					obj['team'] = this.team_name;
					obj['position'] = this.position;
					obj['enterpriseTitle'] = this.enterpriseTitle;
					obj['projectInfo'] = this.other_img
				}
				
				createApply(obj).then(res => {
					if (res.data.isFree == 1) {
						this.$st.success("报名成功", () => {
							uni.navigateBack()
						})
					} else {
						uni.redirectTo({
							url: `/pages/registration/cashier?data=${JSON.stringify(res.data)}`
						})
					}
				})
			},
			
			/**
			 * 获取个人信息
			 */
			getUserInfo() {
				getMineInfoData().then(res => {
					this.team_name = res.data.team;
					this.school = res.data.academy;
					this.name = res.data.name;
					this.sex = res.data.sex;
					this.idCard = res.data.idCard;
					this.mobile = res.data.phone;
					this.email = res.data.email;
					this.address = res.data.address;
					this.size = res.data.size;
					this.blood = res.data.blood;
					this.urgent_name = res.data.urgent_name;
					this.urgent_mobile = res.data.urgent_phone;
					this.physical_img = res.data.examinationReport;
					this.other_img = res.data.projectInfo;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F6F6F6;
	}

	.header {
		position: sticky;
		left: 0;
		top: 0;
		width: 100%;
		height: 120rpx;
		z-index: 10;
		display: flex;
		background-color: #F7F7F7;
		flex-wrap: wrap;

		.tab-item {
			flex: 1;
			height: 120rpx;
			line-height: 120rpx;
			text-align: center;
			color: #333333;
			font-size: 30rpx;
			overflow: hidden;
			position: relative;
			z-index: 11;

			.line {
				position: absolute;
				left: 50%;
				bottom: 24rpx;
				width: 34rpx;
				height: 6rpx;
				background-color: #EA5520;
				border-radius: 3rpx;
				overflow: hidden;
				transform: translateX(-50%);
				z-index: 12;
			}
		}

		.active {
			color: #EA5520;
		}
	}

	.wrap {
		--bottom-height: 140rpx;
		width: 100%;
		overflow: hidden;
		padding: 20rpx 0 140rpx;

		.wrap-content {
			width: 100%;
			overflow: hidden;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: white;
		}

		.item {
			width: 100%;
			height: 108rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			overflow: hidden;
			border-bottom: 2rpx solid #E5E5E5;
			background-color: white;

			.left {
				color: #333333;
				font-size: 30rpx;
				font-weight: bold;
			}

			.value {
				width: 450rpx;
				height: 60rpx;
				text-align: right;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				color: #333333;
				font-size: 30rpx;
			}

			/deep/ .place {
				color: #999999;
			}

			.value2 {
				flex: 1 !important;
			}

			.arrow {
				margin-left: 14rpx;
				width: 12rpx;
				height: 22rpx;
			}
		}

		.physical-bg {
			padding: 40rpx 0rpx;
			width: 100%;
			overflow: hidden;

			.title {
				color: #333333;
				font-size: 30rpx;
				font-weight: bold;
			}

		}

		.other-bg {
			border-top: 2rpx solid #E5E5E5;
			width: 100%;
			padding: 40rpx 0;
			overflow: hidden;

			.title-bg {
				width: 100%;
				overflow: hidden;
				display: flex;
				align-items: baseline;

				.aa {
					color: #333333;
					font-size: 30rpx;
					font-weight: bold;
				}

				.bb {
					margin-left: 8rpx;
					color: #999999;
					font-size: 24rpx;
				}
			}

			.sub-title {
				margin-top: 24rpx;
				color: #999999;
				font-size: 24rpx;
			}

		}

		.img-bg {
			margin-top: 30rpx;
			width: 182rpx;
			height: 182rpx;
			background-color: #F6F6F6;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;

			.add {
				width: 44rpx;
				height: 44rpx;
			}

			.img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 116rpx;
		z-index: 10;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: white;

		.btn {
			width: 690rpx;
			height: 80rpx;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			overflow: hidden;
			background-color: #EA5520;
			color: white;
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	view {
		line-height: 1;
	}
</style>